import doT from 'dot';
import templateCity from './CityBox.html';
import templatePromote from './promote.html';
import './CityBox.css';

const cityLetter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'];
const provinceLetter = ['A', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'X', 'Y', 'Z'];

export default class WeatherBox {
    constructor(dom, cityName, callback) {
        this.hotCities = null;// 热点城市
        this.fullPosC = [];//所有城市
        this.fullPosP = [];//所有省
        this._extractProvince = null;//展开的province，用于方便显示
        this._extractCities = null;
        this.promotes = [];//城市智能提示
        this.boxShow = false;
        this.cityChoose = '北京';
        this.letterCityFlag = true;
        this.promoteShow = false;
        this.preservePinYin = false;

        this.cityName = cityName;
        this.cityBox = dom;
        this.cityBox.className = 'city-name-box';
        this.callback = callback;

        $.getJSON('../data/china_admin_city.json', (data) => {
            // let data = response.data;
            this.hotCities = data.data[0].list;
            //抽出所有的city，方便下面的循环
            let _extractCities = [];
            for (let i = 0; i < data.data.length; i++) {
                _extractCities = _extractCities.concat(data.data[i].list);
            }

            this._extractCities = _extractCities;

            for (let i = 0; i < cityLetter.length; i++) {
                let item = {
                    head: cityLetter[i],
                    list: []
                }
                //避开全国的
                for (let j = 1; j < _extractCities.length; j++) {
                    let cty = _extractCities[j];
                    if (cty && cty.ename.substr(0, 1) === cityLetter[i]) {
                        item.list.push(cty);
                    }
                }

                this.fullPosC.push(item);
            }
            //需要展开fullPosP,因为展示方式不一样
            let _extractProvince = [];
            for (let i = 0; i < provinceLetter.length; i++) {
                let item = {
                    head: provinceLetter[i],
                    list: []
                }
                //避开全国的
                for (let j = 1; j < data.data.length; j++) {
                    let pro = data.data[j];
                    if (pro && pro.ename.substr(0, 1) === provinceLetter[i]) {
                        item.list.push(pro);
                        _extractProvince.push(pro);
                    }
                }

                this.fullPosP.push(item);
            }

            this._extractProvince = _extractProvince;

            const htmlWea = doT.template(templateCity)({
                'city': this.cityName,
                'hotCities': this.hotCities,
                'promotes': this.promotes,
                'fullPosC': this.fullPosC,
                '_extractProvince': this._extractProvince
            });
            dom.innerHTML = htmlWea;

            const that = this;
            $('#hot-city > span').click(function (e) {
                that.do(e.target.getAttribute('lon'), e.target.getAttribute('lat'), e.target.innerHTML);
            });
            $('#promote > div').click(function (e) {
                that.do(e.target.getAttribute('lon'), e.target.getAttribute('lat'), e.target.innerHTML);
            });
            $('.pos-content > span').click(function (e) {
                that.do(e.target.getAttribute('lon'), e.target.getAttribute('lat'), e.target.innerHTML);
            });
            $('#search-button').click(() => {
                this.searchButtonClick();
                this.updateSence();
            });
            $('#specialInput').focus((e) => {
                this.pinyiClick(e);
                this.updateSence();
            });
            $('#specialInput').keyup((e) => {
                this.findPinYinCity(e);
                this.updateSence();
            });
            $('#city-box').blur((e) => {
                this.blur(e);
                this.updateSence()
            });
            $('#city-box-name').click((e) => {
                this.boxShow = !this.boxShow;
                this.updateSence()
            });
            $('#close').click((e) => {
                this.boxShow = false;
                this.updateSence()
            });
            $('#rankP').click((e) => {
                this.letterCityFlag = false;
                this.updateSence()
            });
            $('#rankC').click((e) => {
                this.letterCityFlag = true;
                this.updateSence()
            });
        });
    }

    setCityName(newName) {
        document.getElementById('city-box-name').innerHTML = newName;
        document.getElementById('city-show').innerHTML = '当前展示：' + newName;
    }

    searchButtonClick() {
        let val = $('#specialInput').val();
        if (val.length > 0) {

            this.promotes = [];

            for (let i = 0; i < this._extractCities.length; i++) {
                let item = this._extractCities[i];
                if (item.pyname.toLowerCase().replace(/ /g, '').indexOf(val) !== -1) {
                    this.promotes.push(item);
                    this.do(item.lon, item.lat, item.cname);
                    this.promoteShow = false;
                    return;
                } else if (item.cname.indexOf(val) !== -1) {
                    this.promotes.push(item);
                    this.do(item.lon, item.lat, item.cname);
                    this.promoteShow = false;
                    return;
                }
            }
        } else {
            this.promoteShow = false;
        }
    }

    findPinYinCity(event) {
        let val = event.target.value;
        this.preservePinYin = false;
        if (val.length > 0) {

            this.promotes = [];
            debugger
            for (let i = 0; i < this._extractCities.length; i++) {
                let item = this._extractCities[i];
                if (item.pyname.toLowerCase().replace(/ /g, '').indexOf(val) !== -1) {
                    this.promotes.push(item);
                } else if (item.cname.indexOf(val) !== -1) {
                    this.promotes.push(item);
                }
            }

            if (this.promotes.length > 0) {
                this.promoteShow = true;
                this.updateSence();
                this.updatePromotes();
            }
        } else {
            this.promoteShow = false;
        }
    }

    blur(e) {
        setTimeout(() => {
            if (this.preservePinYin) {
                return;
            } else {
                this.boxShow = false;
            }
        }, 50);
    }

    do(a, b, c) {
        this.callback(a, b, c);
        this.cityChoose = c;
        this.setCityName(c);
    }

    updatePromotes() {
        const dom = document.getElementById('promote');
        dom.innerHTML = '';
        const html = doT.template(templatePromote)({
            'promotes': this.promotes
        });
        dom.innerHTML = html;
        const that = this;
        $('#promote > div').click(function (e) {
            that.do(e.target.getAttribute('lon'), e.target.getAttribute('lat'), e.target.innerHTML);
        });
    }

    pinyiClick(e) {
        this.preservePinYin = true;
    }


    updateSence() {
        if (this.promoteShow) {
            $('#promote').css('display', 'block');
        }
        else {
            $('#promote').css('display', 'none');
        }

        if (this.letterCityFlag) {
            $('#rankP').removeClass('my-active');
            $('#rankC').addClass('my-active');
            $('.full-city-c-container').css('display', 'block');
            $('.full-city-p-container').css('display', 'none');
        }
        else {
            $('#rankP').addClass('my-active');
            $('#rankC').removeClass('my-active');
            $('.full-city-c-container').css('display', 'none');
            $('.full-city-p-container').css('display', 'block');
        }

        if (this.boxShow) {
            $('#city-box').css('display', 'block')
        }
        else {
            $('#city-box').css('display', 'none')
        }
    }
}